import type {
  ThemeStyles,
  TitleStylesConfig,
  TitleStyleType,
} from '../../../interfaces'
import { ThemeType } from '../../../interfaces'

export const themeClassPrefix = 'theme'
const NO_DECORATION_CLASS = 'no-decoration'

/**
 * 标题样式常量
 */
export const TITLE_STYLES: Record<TitleStyleType, TitleStylesConfig> = {
  PRIMARY: {
    className: 'heading-primary__title',
    styles: `
      .heading-primary__title {
        position: relative;
        display: flex;
        gap: 5px;
        align-items: center;
        min-height: 48px;
        padding: 0 20px;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: normal;
        border-radius: 8px 8px 0 0;
        margin: 12px 0;
        overflow: hidden;
        z-index: 1;
        user-select: all !important;
        border: none !important;
        width: unset !important;
        
        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          top: unset !important;
          left: 0;
          width: 100%;
          height: 1px;
          opacity: 0.6;
          border: none !important;
          background-image: none !important;
          animation: none !important;
          flex-shrink: 0 !important;
        }
      
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          mix-blend-mode: overlay;
          border: none !important;
          background-image: none !important;
          animation: none !important;
        }
      }
    `,
    light: `
      .heading-primary__title.${themeClassPrefix}-${ThemeType.LIGHT} {
        color: #ffffff !important;
        a, strong, span {
          color: #ffffff !important;
        }
        background: linear-gradient(
          135deg, 
          rgba(106, 17, 203, 0.9) 0%, 
          rgba(37, 117, 252, 0.9) 50%, 
          rgba(0, 209, 255, 0.7) 100%
        ) !important;
        box-shadow: 
          0 2px 12px rgba(106, 17, 203, 0.2),
          inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;

        &::before {
          background: linear-gradient(
            90deg,
            rgba(0, 255, 255, 0),
            rgba(0, 255, 255, 0.5),
            rgba(37, 117, 252, 0)
          ) !important;
        }

        &::after {
          background: repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 3px
          ) !important;
        }
      }
    `,
    dark: `
      .heading-primary__title.${themeClassPrefix}-${ThemeType.DARK} {
        color: #f0f0f0 !important;
        a, strong, span {
          color: #f0f0f0 !important;
        }
        background: linear-gradient(
          135deg, 
          rgba(90, 20, 30, 0.9) 0%, 
          rgba(50, 15, 25, 0.9) 50%, 
          rgba(30, 10, 20, 0.7) 100%
        ) !important;
        box-shadow: 
          0 2px 12px rgba(0, 0, 0, 0.5),
          inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;

        &::before {
          background: linear-gradient(
            90deg,
            rgba(255, 50, 50, 0),
            rgba(255, 50, 50, 0.3) 50%,
            rgba(50, 15, 25, 0)
          ) !important;
        }

        &::after {
          background: repeating-linear-gradient(
            45deg,
            rgba(255, 0, 0, 0.05) 0px,
            rgba(255, 0, 0, 0.05) 1px,
            transparent 1px,
            transparent 3px
          ) !important;
        }
      }
    `,
    pink: `
      .heading-primary__title.${themeClassPrefix}-${ThemeType.PINK} {
        color: #ffffff !important;
        a, strong, span {
          color: #ffffff !important;
        }
        background: linear-gradient(
          135deg, 
          rgba(255, 107, 129, 0.9) 0%, 
          rgba(255, 142, 83, 0.9) 50%, 
          rgba(255, 193, 0, 0.7) 100%
        ) !important;
        box-shadow: 
          0 2px 12px rgba(255, 107, 129, 0.3),
          inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;

        &::before {
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.5),
            rgba(255, 142, 83, 0)
          ) !important;
        }

        &::after {
          background: repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1) 0px,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px,
            transparent 3px
          ) !important;
        }
      }
    `,
  },
  SECONDARY: {
    className: 'heading-secondary__title',
    styles: `
      .heading-secondary__title {
        position: relative;
        display: flex;
        gap: 5px;
        align-items: center;
        min-height: 36px;
        padding: 0 4px;
        margin: 12px 0;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: normal;
        border-radius: 3px;
        user-select: all !important;
        width: unset !important;
        
        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          margin: 0 8px;
          box-shadow: 0 0 0 2px rgba(0, 209, 255, 0.2);
          border: none !important;
          background-image: none !important;
          animation: none !important;
          flex-shrink: 0 !important;
        }
        
        &::after {
          border: none !important;
          background-image: none !important;
          animation: none !important;
        }

        @media (max-width: 768px) {
          font-size: 14px;
        }
      }
    `,
    light: `
      .heading-secondary__title.${themeClassPrefix}-${ThemeType.LIGHT} {
        color: #7a2193 !important;
        a, strong, span {
          color: #7a2193 !important;
        }
        
        &:not(.${NO_DECORATION_CLASS}) {
          background: linear-gradient(
            90deg,
            rgba(37, 117, 252, 0.15) 0%,
            rgba(106, 17, 203, 0.1) 100%
          ) !important;
          border-left: 3px solid rgba(0, 209, 255, 0.5) !important;
          box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }
        
        &.${NO_DECORATION_CLASS} {
          background: none !important;
          border-left: none !important;
          box-shadow: none !important;
        }
        
        &::before {
          background: rgba(0, 209, 255, 0.8) !important;
        }
      }
    `,
    dark: `
      .heading-secondary__title.${themeClassPrefix}-${ThemeType.DARK} {
        color: #ff6b81 !important;
        a, strong, span {
          color: #ff6b81 !important;
        }
        
        &:not(.${NO_DECORATION_CLASS}) {
          background: linear-gradient(
            90deg,
            rgba(90, 20, 30, 0.15) 0%,
            rgba(40, 10, 15, 0.1) 100%
          ) !important;
          border-left: 3px solid rgba(255, 80, 80, 0.5) !important;
          box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.2) !important;
        }
          
        &.${NO_DECORATION_CLASS} {
          background: none !important;
          border-left: none !important;
          box-shadow: none !important;
        }

        &::before {
          background: rgba(255, 80, 80, 0.8) !important;
        }
      }
    `,
    pink: `
      .heading-secondary__title.${themeClassPrefix}-${ThemeType.PINK} {
        color: #d23669 !important;
        a, strong, span {
          color: #d23669 !important;
        }
        
        &:not(.${NO_DECORATION_CLASS}) {
          background: linear-gradient(
            90deg,
            rgba(255, 142, 83, 0.15) 0%,
            rgba(255, 107, 129, 0.1) 100%
          ) !important;
          border-left: 3px solid rgba(255, 193, 0, 0.5) !important;
          box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }
          
        &.${NO_DECORATION_CLASS} {
          background: none !important;
          border-left: none !important;
          box-shadow: none !important;
        }  

        &::before {
          background: rgba(255, 193, 0, 0.8) !important;
        }
      }
    `,
  },
  TERTIARY: {
    className: 'heading-tertiary__title',
    styles: `
      .heading-tertiary__title {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 32px;
        padding: 0 4px;
        margin: 12px 0;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: normal;
        border-radius: 2px;
        user-select: all !important;
        width: unset !important;

        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          margin: 0 8px;
          border: none !important;
          background-image: none !important;
          animation: none !important;
          flex-shrink: 0 !important;
        }
        
        &::after {
          border: none !important;
          background-image: none !important;
          animation: none !important;
        }
      
        @media (max-width: 768px) {
          font-size: 13px;
        }
      }
    `,
    light: `
      .heading-tertiary__title.${themeClassPrefix}-${ThemeType.LIGHT} {
        color: #5f5f5f !important;
        a, strong, span {
          color: #5f5f5f !important;
        }
        
        &:not(.${NO_DECORATION_CLASS}) {
          background: rgba(0, 0, 0, 0.03) !important;
          border-left: 2px solid rgba(0, 209, 255, 0.5) !important;
          box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }
        
        &.${NO_DECORATION_CLASS} {
          background: none !important;
          border-left: none !important;
          box-shadow: none !important;
        }

        &::before {
          background: rgba(0, 209, 255, 0.8) !important;
        }
      }
    `,
    dark: `
      .heading-tertiary__title.${themeClassPrefix}-${ThemeType.DARK} {
        color: #d8a8b0 !important;
        a, strong, span {
          color: #d8a8b0 !important;
        }
        
        &:not(.${NO_DECORATION_CLASS}) {
          background: rgba(50, 15, 25, 0.1) !important;
          border-left: 2px solid rgba(255, 80, 80, 0.5) !important;
          box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.2) !important;
        }
        
        &.${NO_DECORATION_CLASS} {
          background: none !important;
          border-left: none !important;
          box-shadow: none !important;
        }

        &::before {
          background: rgba(255, 80, 80, 0.8) !important;
        }
      }
    `,
    pink: `
      .heading-tertiary__title.${themeClassPrefix}-${ThemeType.PINK} {
        color: #8b5f65 !important;
        a, strong, span {
          color: #8b5f65 !important;
        }
        
        &:not(.${NO_DECORATION_CLASS}) {
          background: rgba(255, 107, 129, 0.05) !important;
          border-left: 2px solid rgba(255, 193, 0, 0.5) !important;
          box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }
        
        &.${NO_DECORATION_CLASS} {
          background: none !important;
          border-left: none !important;
          box-shadow: none !important;
        }

        &::before {
          background: rgba(255, 193, 0, 0.8) !important;
        }
      }
    `,
  },
  OTHERS: {
    className: 'heading-others__title',
    styles: `
    .heading-others__title {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 32px;
      padding: 0 2px;
      margin: 12px 0;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: normal;
      border-radius: 2px;
      user-select: all !important;
      width: unset !important;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 2px;
        height: 100%;
        border-radius: 3px 0 0 3px;
        border: none !important;
        background-image: none !important;
        animation: none !important;
        flex-shrink: 0 !important;
      }
      
      &::after {
        border: none !important;
        background-image: none !important;
        animation: none !important;
      }

      @media (max-width: 768px) {
        font-size: 13px;
      }
    }
  `,
    light: `
    .heading-others__title.${themeClassPrefix}-${ThemeType.LIGHT} {
      color: #6d6d6d !important;
      a, strong, span {
        color: #6d6d6d !important;
      }
      background: rgba(0, 0, 0, 0.02) !important;
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;

      &::before {
        background: rgba(0, 209, 255, 0.8) !important;
      }
    }
  `,
    dark: `
    .heading-others__title.${themeClassPrefix}-${ThemeType.DARK} {
      color: #c9c9c9 !important;
      a, strong, span {
        color: #c9c9c9 !important;
      }
      background: rgba(30, 10, 20, 0.15) !important;
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.2) !important;

      &::before {
        background: rgba(255, 80, 80, 0.8) !important;
      }
    }
  `,
    pink: `
    .heading-others__title.${themeClassPrefix}-${ThemeType.PINK} {
      color: #9e6a74 !important;
      a, strong, span {
        color: #9e6a74 !important;
      }
      background: rgba(255, 107, 129, 0.08) !important;
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;

      &::before {
        background: rgba(255, 193, 0, 0.8) !important;
      }
    }
  `,
  },
}

/**
 * 生成指定标题类型的全主题样式
 * @param type 标题类型
 * @returns 包含三种主题样式的对象
 */
export function generateTitleThemeStyles(type: TitleStyleType): ThemeStyles {
  const config = TITLE_STYLES[type]
  return {
    light: `${config.styles}\n${config.light || ''}`,
    dark: `${config.styles}\n${config.dark || config.light || ''}`,
    pink: `${config.styles}\n${config.pink || config.light || ''}`,
  }
}

/**
 * 生成所有标题类型的全主题样式
 * @returns 包含所有标题类型和主题的样式对象
 */
export function generateAllTitleStyles(): Record<TitleStyleType, ThemeStyles> {
  return {
    PRIMARY: generateTitleThemeStyles('PRIMARY'),
    SECONDARY: generateTitleThemeStyles('SECONDARY'),
    TERTIARY: generateTitleThemeStyles('TERTIARY'),
    OTHERS: generateTitleThemeStyles('OTHERS'),
  }
}

/**
 * 生成所有标题类型的所有主题样式
 * @returns 包含所有主题的CSS字符串
 */
export function generateAllTitleThemes(): string {
  const themes: ThemeType[] = Object.values(ThemeType)
  let result = '/* BASE TITLE STYLES */\n'

  result += Object.values(TITLE_STYLES)
    .map(config => config.styles)
    .join('\n\n')

  result += '\n\n'

  themes.forEach((theme) => {
    result += `/* ${theme.toUpperCase()} THEME TITLE STYLES*/\n`
    result += generateThemeOverrides(theme)
    result += '\n\n'
  })

  return result.trim()
}

/**
 * 生成指定主题下的所有标题样式（不包含基础样式）
 * @param theme 主题类型
 * @returns 拼接后的 CSS 字符串
 */
export function generateThemeOverrides(theme: ThemeType = ThemeType.LIGHT): string {
  return Object.values(TITLE_STYLES)
    .map(config => config[theme] || config.light || '')
    .join('\n\n')
}

/**
 * 获取指定类型的标题类名
 * @param type 标题类型
 * @param theme 主题类型
 * @returns 对应的CSS类名
 */
export function getTitleThemeClassName(type: TitleStyleType, theme: ThemeType): string {
  return `${TITLE_STYLES[type].className} ${themeClassPrefix}-${theme}`
}

/**
 * 获取所有标题的选择器
 * @returns 所有标题的选择器字符串
 */
export function getAllTitleSelector(): string {
  return `${Object.values(TITLE_STYLES).map(c => `.${c.className}`).join(', ')}`
}
